/*
 *  Copyright 2025 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
@import (reference) '../../../styles/variables.less';

.contract-card-container {
  .ant-card-head {
    border-bottom: none;

    .ant-card-head-title {
      overflow: initial;
    }

    .contract-header-container {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;

      .contract-status-img {
        width: 90px;
        height: 90px;
      }
    }

    .contract-title {
      display: block;
      font-size: 20px;
      font-weight: 600;
      color: @grey-900;
    }

    .contract-sub-header-title {
      margin-right: 8px;
      font-size: 14px;
      color: @grey-700;
      font-weight: 400;
    }
    .contract-sub-header-value {
      font-size: 14px;
      color: @grey-900;
      font-weight: 500;
    }

    .contract-action-container {
      display: flex;
      align-items: center;
      gap: 12px;

      .ant-btn.contract-action-button {
        border-radius: 8px;
        border: 1px solid @grey-300;
        background: @white;
        box-shadow: @button-box-shadow-default;

        .anticon {
          font-size: 20px;
          color: @grey-600;
        }

        &:hover {
          background-color: @grey-100;
        }
      }
    }

    .contract-version-badge {
      border: 1px solid @purple-7;
      background: @purple-6;
      color: @purple-5;
      padding: 4px 12px;
    }

    .contract-success-badge {
      border: 1px solid @green-16;
      color: @green-17;
      background: @green-9;
    }
  }

  .ant-card-body {
    padding: 24px;
  }

  .contract-status-badge {
    padding: 2px 8px;
  }

  .contract-status-badge-container {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;

    .status-badge {
      padding: 2px 12px;

      .status-badge-label {
        font-size: 14px;
        font-weight: 500;
      }

      &.success {
        border-color: @green-16;
      }

      &.version {
        border-color: @purple-7;
      }
    }
  }
}

.contract-action-dropdown {
  .ant-dropdown-menu {
    padding: 0;
    border-radius: 8px;
    border: 1px solid @grey-15;
    box-shadow: @button-box-shadow-default;

    .ant-dropdown-menu-item-divider {
      margin: 0;
    }

    .ant-dropdown-menu-item {
      padding: 10px 16px;

      .contract-action-dropdown-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 500;
        color: @grey-700;

        .anticon {
          width: 16px;
          height: 16px;
          color: @grey-700;
        }

        &.contract-action-dropdown-delete-item {
          color: @red-14;
          .anticon {
            color: @red-14;
          }
        }
      }
    }
  }
}

.contract-detail-container {
  padding-left: 16px;
  width: 95%;

  .contract-dash-separator {
    border-style: dotted;
    border-width: 2px 0 0;
    border-color: @grey-200;
  }

  .contract-card-items {
    margin-bottom: 32px;

    &:last-child {
      margin-bottom: 0;
    }

    .contract-card-header-container {
      display: flex;
      align-items: center;
      gap: 12px;
      overflow: hidden;
      margin-bottom: 16px;

      .contract-card-header {
        min-width: fit-content;
        font-size: 14px;
        font-weight: 600;
        color: @grey-900;
      }

      .ant-divider-horizontal {
        margin: 0;
        width: 100%;
      }
    }

    .contract-status-container {
      display: flex;
      align-items: baseline;
      gap: 12px;

      .ant-typography {
        color: @grey-700;
        font-size: 14px;
        font-weight: 500;
      }

      .status-badge-v2.success {
        border: 1px solid @green-16;
        color: @green-17;
        background: @green-9;
      }
    }
  }

  .contract-card-title-container {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .contract-card-title {
      font-size: 18px;
      font-weight: 600;
      color: @grey-900;
    }

    .contract-card-description {
      font-size: 14px;
      font-weight: 400;
      color: @grey-600;
    }
  }
}

.contract-status-card-item {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid @border-color;
  margin-bottom: 12px;
  background: @white;

  .contract-status-card-icon {
    font-size: 20px;
    color: @grey-700;
  }

  .contract-status-card-label {
    font-size: 14px;
    font-weight: 500;
    color: @grey-900;
  }

  .contract-status-card-desc {
    font-size: 12px;
    font-weight: 500;
    color: @grey-600;
  }

  .contract-status-card-time {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 300;
    color: @grey-600;
  }
}

.rule-item-container {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .rule-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    .rule-icon {
      margin-top: 2px;
      font-size: 32px;
      color: transparent;

      &.rule-icon-default {
        font-size: 22px;
        color: @grey-600;
      }
    }

    .rule-item-content {
      display: flex;
      flex-direction: column;
      .rule-name {
        font-size: 14px;
        font-weight: 500;
        color: @grey-900;
      }

      .rule-description {
        font-size: 14px;
        font-weight: 400;
        color: @grey-600;
      }
    }
  }
}

.data-quality-card-container {
  .data-quality-chart-pie-chart {
    cursor: pointer !important;
  }

  .data-quality-chart-container-link {
    text-decoration: none;
    color: @grey-900;
    cursor: pointer;
  }

  .chart-label {
    font-size: 16px;
    font-weight: 600;
    color: @grey-900;
  }

  .data-quality-chart-container {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    border: 1px solid @border-color-8;
    border-radius: @card-radius;
    padding: @padding-md;
    background: @white;
    box-shadow: @button-box-shadow-default;

    .data-quality-chart-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.data-quality-item {
  display: flex;
  align-items: center;
  gap: 12px;

  .data-quality-list-badge {
    padding: 8px;
    gap: 0px;
  }

  .data-quality-item-content {
    display: flex;
    flex-direction: column;

    .data-quality-item-name-link {
      font-weight: 500;
    }
  }

  .data-quality-item-description {
    font-size: 14px;
    font-weight: 400;
    color: @grey-600;
  }

  .test-status-icon {
    svg {
      height: 32px;
      width: 32px;
    }
  }
}
.ant-tag.custom-tag {
  border-radius: 6px;
  padding: 2px @size-xs 2px 6px;
  font-size: @size-sm;
  font-weight: @font-medium;
  max-width: 100%;
  text-wrap: auto;
  border: none;
}
.ant-tag.custom-tag.ant-tag-purple {
  background-color: @purple-6;
  color: @purple-5;
}
.ant-tag.custom-tag.ant-tag-blue {
  background-color: @blue-33;
  color: @blue-34;
}
